<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
  color: #347DE1
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.el-card__header_task {
  padding: 18px 20px;
  border-bottom: 1px solid #f5f1eb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgb(238, 241, 246);
  background: #eef1f6;
  font-size: 12px;
  font-weight: bold;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: #F7F9FA;
  border: 1px solid #347DE1;
  border-radius: 8px;
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__left" @click="goJobInfo">
              <i class="el-icon-back"></i>
              <div class="el-page-header__title">返回</div>
            </div>
            <div class="el-page-header__content" style="font-size: 14px;">周期作业详情</div>
          </div>
        </div>
        <template>
          <el-tabs v-model="activeName">
            <el-tab-pane label="任务列表" name="first">
              <div class="head-container">
                <task-operation :permission="permission" :is-show-query="false"/>
              </div>
              <el-table ref="table" v-loading="crud.loading" :data="crud.data" row-key="id" @select="crud.selectChange"
                        @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
                        @filter-change="crud.handleFilterChange"
                        :header-cell-style="{background: '#eef1f6', color: '#606266'}" border stripe>
                <el-table-column type="selection" width="55"/>
                <el-table-column v-if="columns.visible('taskCode')" prop="taskCode" :show-overflow-tooltip="true"
                                 label="任务编码"
                                 min-width="140"/>
                <el-table-column v-if="columns.visible('taskName')" prop="taskName" :show-overflow-tooltip="true"
                                 label="任务名称"
                                 min-width="140"/>
                <el-table-column v-if="columns.visible('shellPath')" prop="shellPath" :show-overflow-tooltip="true"
                                 label="shell命令" min-width="140"/>
                <el-table-column v-if="columns.visible('resNum')" prop="resNum" :show-overflow-tooltip="true"
                                 label="资源数"
                                 min-width="140"/>
                <el-table-column v-if="columns.visible('allowErrCount')" prop="allowErrCount"
                                 :show-overflow-tooltip="true"
                                 label="允许出错次数" min-width="140"/>
                <el-table-column v-if="columns.visible('isOrder')" key="isOrder" prop="isOrder" label="是否顺序执行"
                                 min-width="100"
                                 :filters="[
                      { text: '是', value: '1' },
                      { text: '否', value: '2' }
                    ]"
                                 filter-placement="bottom-end" :filter-multiple="false" column-key="isOrder">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.isOrder == 1" type="success">是</el-tag>
                    <el-tag v-if="scope.row.isOrder == 2" type="info">否</el-tag>
                  </template>
                </el-table-column>
                <el-table-column v-if="columns.visible('taskStatus')" prop="taskStatus" label="状态" min-width="100"
                                 :filters="taskStatusByDict" key="taskStatus" filter-placement="bottom-end"
                                 :filter-multiple="false" column-key="taskStatus">
                  <template slot-scope="scope">
                    <el-tag size="medium" :type="formatterTaskStatusType(scope.row.taskStatus)">
                      {{ formatterTaskStatus(scope.row.taskStatus) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column v-if="columns.visible('execStTs')" prop="execStTs" :show-overflow-tooltip="true"
                                 label="开始时间"
                                 min-width="140"/>
                <el-table-column v-if="columns.visible('execEndTs')" prop="execEndTs" :show-overflow-tooltip="true"
                                 label="完成时间" min-width="140"/>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="作业详情" name="second">
              <el-form ref="form" :model="jobDetailInfo" label-position="left" label-width="160px">
                <el-col :span="24" style="padding: 30px;">
                  <div>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="业务日期">
                          <el-input v-model="jobDetailInfo.bizDate" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业执行的业务日期
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)"
                             data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="作业编码">
                          <el-input v-model="jobDetailInfo.jobCode" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，周期作业编码
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)"
                             data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="作业名称">
                          <el-input v-model="jobDetailInfo.jobName" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            周期作业名称
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)"
                             data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="作业状态">
                          <el-input v-model="jobDetailInfo.jobStatus" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业完成状态
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)"
                             data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="开始时间">
                          <el-input v-model="jobDetailInfo.jobStTs" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业开始执行的时间
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)"
                             data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="结束时间">
                          <el-input v-model="jobDetailInfo.jobEndTs" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业执行结束的时间
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)"
                             data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="错误信息">
                          <el-input type="textarea" v-model="jobDetailInfo.errorInfo" disabled/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业执行失败的错误信息
                          </div>
                          <i class="el-icon-info hex-form-inf-icon" @click="crud.onOperInf($event)"
                             data-status="off"></i>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="任务依赖图" name="third">
              <taskDepend :jobCode="jobCode" :bizDate="bizDate" :type="type" ref="taskDepend"/>
            </el-tab-pane>
            <el-tab-pane label="任务执行统计" name="four">
              <cyclejobDefEchars :jobCode="this.jobCode"/>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-card>
      <!--修改-->
      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
                 :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="480px">
        <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
          <el-row>
            <el-form-item label="运行状态">
              <el-select v-model="form.taskStatus" filterable placeholder="请选择">
                <el-option v-for="item in editTaskStatusOptions" :key="item.value" :label="item.label"
                           :value="item.value"
                           :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button icon="el-icon-document-delete" @click="crud.cancelCU">取消</el-button>
          <el-button icon="el-icon-document-add" :loading="crud.status.cu === 2" type="primary" @click="submitCU">保存
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import taskOperation from '@crud/extend/cycleTask/cycleTask/app/CRUD.operation'
import udOperation from '@crud/UD.operation'
import periodTaskApi from '@/api/cycleJob/task'
import job from '@/api/cycleJob/job'
import taskDepend from './taskDepend'
import cyclejobDefEchars from '../../components/cyclejobDefEchars'

const queryList = [{
  cloumValue: 'taskCodeFuzzy',
  cloumName: '任务编码'
},
  {
    cloumValue: 'taskNameFuzzy',
    cloumName: '任务名称'
  }
]
const defaultCrud = CRUD({
  title: '任务实例',
  url: 'api/periodTask',
  queryOnPresenterCreated: false,
  queryList: queryList,
  crudMethod: {
    ...periodTaskApi
  },
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: false,
    batchUpdateStatus: true,
    batchUpdateBizDate: false,
    cpJob: false,
    proCompleted: false,
    proFailed: false
  }
})
const defaultForm = {}

export default {
  name: 'appTask',
  props: {
    pkId: {
      type: String,
      default: null
    },
    jobCode: {
      type: String,
      default: null
    },
    bizDate: {
      type: String,
      default: null
    },
    lookPeriodJobDetailFlag: {
      type: Boolean,
      default: true
    }
  },
  model: {
    prop: 'lookPeriodJobDetailFlag',
    event: 'changes'
  },
  components: {
    rrOperation,
    udOperation,
    taskDepend,
    taskOperation,
    cyclejobDefEchars
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['is_order', 'task_status', 'task_is_end', 'job_def_status', 'cycle_job_status'],
  data() {
    return {
      taskStatusDict: [],
      editTaskStatusOptions: [],
      taskDict: [],
      taskStatusByDict: [],
      type: 'example',
      jobCode: '',
      bizDate: '',
      count: 10,
      flag: false,
      activeName: 'first',
      permission: {
        edit: ['appTask:edit']
      },
      defaultQueryForm: {
        jobCode: null,
        bizDate: null
      },
      taskdetailinfo: {},
      jobDetailInfo: {},
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      qryParam: '',
      qryCloum: '',
      queryForm: {}
    }
  },
  created() {
    this.crud.updateProp('searchToggle', true)
    this.initQry()
    this.taskDict = this.dict.task_status;
    this.taskStatusDict = this.dict.task_status
  },
  watch: {
    taskStatusDict() {
      this.$nextTick(() => {
        this.taskStatusDict.forEach(item => {
          var option = {
            value: item.value,
            label: item.label
          }
          if (item.value == '2' || item.value == '4' || item.value == '5') {
            option.disabled = true
          }
          this.editTaskStatusOptions.push(option)
        })
      })
    },
    taskDict() {
      this.$nextTick(() => {
        this.taskDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.taskStatusByDict.push(obj);
        })
      })
    }
  },
  methods: {
    initQry() {
      this.crud.query.bizDate = this.bizDate
      this.crud.query.jobCode = this.jobCode
      this.jobCode = this.jobCode
      this.bizDate = this.bizDate
      this.defaultQueryForm.jobCode = this.jobCode
      this.defaultQueryForm.bizDate = this.bizDate
      this.getJobDetail(this.pkId)
      this.crud.toQuery()
    },
    goJobInfo() {
      this.$emit('changes', false)
      this.$parent.crud.refresh()
    },
    jobRunStatusFormatter(jobStatus) {
      return this.dict.label.cycle_job_status[jobStatus]
    },
    submitCU() {
      this.crud.status.edit = CRUD.STATUS.PROCESSING
      var taskParamList = this.crud.form.selections
      for (var i = 0; i < taskParamList.length; i++) {
        taskParamList[i].taskExecLog = null
        taskParamList[i].taskTrackMap = null
        taskParamList[i].trackJson = null
      }
      let formData = {
        periodTaskList: taskParamList,
        taskStatus: this.crud.form.taskStatus
      }
      periodTaskApi.batchChangeStatus(formData)
        .then(res => {
          this.crud.status.edit = CRUD.STATUS.NORMAL
          this.crud.editType.changeStatus = false
          this.crud.resetForm()
          this.crud.refresh()
          let msg = '更新【' + res.upCount + '】个任务,成功【' + res.successCount + '】个！'
          this.crud.notify(msg, CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
        .catch(() => {
          this.crud.status.edit = CRUD.STATUS.PREPARED
        })
    },
    getJobDetail(pkId) {
      job.getJobDetailByPkId(pkId)
        .then(res => {
          this.jobDetailInfo = res
          this.jobDetailInfo.jobStatus = this.jobRunStatusFormatter(this.jobDetailInfo.jobStatus)
        })
        .catch(error => {
          console.log(error)
        })
    },
    formatterTaskStatusType(val) {
      const type = ['', 'info', 'primary', '', 'success', 'danger', 'warning']
      return type[val]
    },
    formatterTaskStatus(val) {
      return this.dict.label.task_status[val]
    }
  }
}
</script>
